import Button from "../Button";

const slogans = [
    "更快内容产出",
    "更低运营成本",
    "更广覆盖范围",
    "更快变现速率",
];

const introduces = [
    {
        title: "三大系统",
        desc: "获客通，聚宝盆，直播盒子",
    },
    {
        title: "AI大模型",
        desc: "智能创作，批量生成，玩法变现",
    },
    {
        title: "数字员工",
        desc: "自动触客，自动发布，主动转化",
    },
    {
        title: "全球化网络",
        desc: "全球网络布局，出海合规安心",
    },
];

const MainBanner = () => {
    return (
        <div className="h-svh laptop:h-[44rem] overflow-hidden bg-[url('/mainbanner/mainbanner.png')] bg-cover bg-center flex flex-col justify-center">
            <div className="container m-auto flex flex-col items-center laptop:items-start gap-11 max-w-6xl px-6">
                <div className="font-light leading-10 text-3xl laptop:text-5xl drop-shadow-[0_4px_4px_rgba(41,46,170,0.25)]">
                    中国领先的智能营销SaaS服务商
                </div>
                <ul className="flex items-center gap-12">
                    {slogans.map((slogan, index) => (
                        <li
                            key={index}
                            className="flex flex-col w-[1rem] laptop:w-fit laptop:flex-row items-center gap-1"
                        >
                            <img src="/mainbanner/right.svg" />
                            {slogan}
                        </li>
                    ))}
                </ul>
                <Button className="hidden phone:block mt-6 w-full laptop:w-fit">
                    在线预约演示
                </Button>
            </div>
            <ul className="flex items-center justify-center gap-5 py-6 px-6 bg-gradient-to-b from-[rgba(255,255,255,0.30)] to-[rgba(134,176,255,0.10)] border-t border-[rgba(255,255,255,0.70)]">
                {introduces.map((introduce, index) => (
                    <li
                        key={index}
                        className="flex flex-col laptop:flex-row items-center gap-5"
                    >
                        <img
                            className="w-[5rem] h-[4.4rem]"
                            src={`/mainbanner/m-${index + 1}.png`}
                            alt={introduce.title}
                        />
                        <div className="flex flex-col items-center laptop:items-start gap-2">
                            <dt className="text-xs laptop:text-base desktop:text-lg font-normal text-[#00226C]">
                                {introduce.title}
                            </dt>
                            <dd className="hidden phone:block text-xs text-center laptop:text-left laptop:text-sm text-light-blue">
                                {introduce.desc}
                            </dd>
                        </div>
                    </li>
                ))}
            </ul>
            <div className="w-full phone:hidden px-6 pt-6 pb-9 flex justify-center">
                <Button className="mt-6 w-full laptop:w-fit">
                    在线预约演示
                </Button>
            </div>
        </div>
    );
};

export default MainBanner;
